<template>
  <div>
    <div class="table-default" v-if="tableData">
      <el-button class="backBtn" type="primary" @click="goback">返回</el-button>
      <!-- <print></print> -->
      <div id="base" ref="base">
        <el-descriptions :column="3" border title="基本信息">
          <el-descriptions-item label-class-name="labelClassNAme" class-name="contentClassName" label="采购订单单号">{{ tableData.fbillno }}</el-descriptions-item>
          <el-descriptions-item label-class-name="labelClassNAme" class-name="contentClassName" label="采购组织名称">{{ tableData.fpurchaseorgid_name }}</el-descriptions-item>
          <el-descriptions-item label-class-name="labelClassNAme" class-name="contentClassName" label="业务类型">{{ tableData.fbusinesstype }}</el-descriptions-item>
          <el-descriptions-item label-class-name="labelClassNAme" class-name="contentClassName" label="供应商编码">{{ tableData.fsupplierid_number }}</el-descriptions-item>
          <el-descriptions-item label-class-name="labelClassNAme" class-name="contentClassName" label="供应商名称">{{ tableData.fsupplierid_name }}</el-descriptions-item>
          <el-descriptions-item label-class-name="labelClassNAme" class-name="contentClassName" label="单据状态">{{ statusFormatter[tableData.fdocumentstatus] }}</el-descriptions-item>
        </el-descriptions>
      </div>
      <div id="details" ref="details">
        <el-tabs v-model="activeName" class="demo-tabs">
          <el-tab-pane label="订单明细" name="details">
            <el-table :data="tableData.detailscheck_all" class="mt-3" border>
              <el-table-column prop="fseq" label="	行号" />
              <el-table-column prop="fmaterialid" label="	SKU" min-width="150" />
              <el-table-column prop="fmaterialname" label="	物料名称" min-width="120" />
              <el-table-column prop="fmaterialmodel" label="规格" />
              <el-table-column prop="fmodel" label="型号" />
              <el-table-column prop="funitid_number" label="采购单位编码" min-width="150" />
              <el-table-column prop="funitid_name" label="采购单位名称" min-width="150" />
              <el-table-column prop="fqty" label="采购数量" min-width="120" />
              <el-table-column prop="fdeliverydate" label="交货日期" min-width="170" />
              <!-- <el-table-column prop="quantity_in" label="入库数量" min-width="120" />
              <el-table-column prop="returnquantity" label="退货数量" min-width="120" /> -->
              <el-table-column prop="fmemo" label="备注" min-width="120" />
            </el-table>
            <Paginate />
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>

    <Dialog v-model="visible" :title="title" destroy-on-close>
      <Create @close="close(reset)" :primary="id" :api="api" />
    </Dialog>
  </div>
</template>
  
  <script lang="ts" setup>
import { computed, onMounted, toRaw, ref } from 'vue'

import Create from './create.vue'
import { useGetList } from '/admin/composables/curd/useGetList'
import { useDestroy } from '/admin/composables/curd/useDestroy'
import { useOpen } from '/admin/composables/curd/useOpen'
import { useRouter, useRoute } from 'vue-router'
import { ArrowDownBold } from '@element-plus/icons-vue'
import print from './print.vue'
import {delDetailRouter} from '/admin/utils/delDetailRouter'
const route = useRoute()
const router = useRouter()

const props = defineProps({
  isDetail: Boolean,
  sendId: Number,
  //   tableData:Object
})

console.log('接受父传值', props)

// const api = `purchasing/purchaseorder`
const api = `purchasing/purchaseorder/${route.query.id}`

// console.log('详情页api', api)

const { data, query, search, reset, loading, toraw } = useGetList(api)
const { destroy, deleted } = useDestroy()
const { open, close, title, visible, id } = useOpen()

const tableData = computed(() => data.value?.data)

console.log(tableData)

const isMore = ref<boolean>(false)

const activeName = ref('details')

const getMore = () => {
  console.log('获取更多')
  isMore.value = !isMore.value
}

const statusFormatter = ref({
  0: '未审核',
  1: '审核',
})

// let emit = defineEmits(['custom-click'])

// 返回，切换组件
const goback = () => {
  delDetailRouter('采购订单详情','/purchasing/purchaseorder')
}

const formatter = (row, column, value, index) => {
  return {
    0: '作废',
    1: '未作废',
  }[value]
}

const fdocumentstatus = ref({
  0: '未审核',
  1: '审核',
})
const fforbidstatus = ref({
  0: '作废',
  1: '未作废',
})

onMounted(() => {
  search()
  deleted(reset)
})
</script>

<style lang="css" scoped>
.table-default {
  padding: 10px 20px;
}
.backBtn {
  margin: 20px 10px;
}
.labelClassNAme {
  width: 100px;
}
.contentClassName {
  width: 170px;
}
</style>
  